<template>
  <div @mouseup="clickPoint" style="background-color: rgb(58,58,58);padding-top: 20px;overflow: hidden">
    <div style="position: absolute;top: 4px;right: 10px">
      <img src="~assets/img/cfc_logo.png" height="96px" width="130px" alt="">
    </div>
    <el-row style="margin-left: 20px;">
      <el-col :span="24">
        <a href="#" @click="jumpProvince"><i style="color: rgb(255, 192, 0);vertical-align: middle;" class="fa fa-arrow-circle-left fa-2x" aria-hidden="true"></i></a>&nbsp;&nbsp;
        <span style="color: rgb(255, 255, 255);font-size: larger;line-height: 40px;font-weight: bold;vertical-align: middle;">
          {{dateTime}}&nbsp;&nbsp;&nbsp;&nbsp;
        </span>
        <span style="color: rgb(255, 192, 0);font-size: larger;line-height: 40px;font-weight: bold;vertical-align: middle;">
          <i class="fa fa-trophy" aria-hidden="true"></i>&nbsp;&nbsp;{{cinema.rank}}&nbsp;&nbsp;&nbsp;&nbsp;
        </span>
        <span style="color: rgb(255, 255, 255);font-size: larger;line-height: 40px;font-weight: bold;vertical-align: middle;">
          {{ cinema.name }}
        </span>
      </el-col>
    </el-row>
    <el-row style="margin-left: 20px;">
      <el-col :span="24">
        <span style="color: rgb(255, 192, 0);font-size: 30px;line-height: 40px;font-weight: bold">
          票房:{{cinema.boxoffice}}&nbsp;&nbsp;人次:{{cinema.tickets}}&nbsp;&nbsp;场次:{{cinema.rounds}}
        </span>
      </el-col>
    </el-row>
    <br/>
    <el-row style="margin-left: 20px;">
      <el-col :span="24">
        <MultipleYLineChart :chartData="data5" ></MultipleYLineChart>
      </el-col>
    </el-row>
    <br/>
    <el-row style="margin-left: 20px;">
      <el-col :span="24">
        <HorizontalBarChart :chartData="data6" ></HorizontalBarChart>
      </el-col>
    </el-row>
    <br/>
  </div>
</template>

<script>
  import Vue from 'vue'
  import Component, {namespace, Getter} from 'class-component'
  import HorizontalBarChart from '~components/echarts/horizontalBar'
  import MultipleYLineChart from '~components/echarts/multipleYLine'
  import axios from 'axios'
  import moment from 'moment'

  const ScreenMapDataGetter = namespace('screenMapData', Getter)
  @Component({
    components: {
      HorizontalBarChart,
      MultipleYLineChart
    }
  })
  export default class filmTicket extends Vue {
    @ScreenMapDataGetter provinceTimer
    @ScreenMapDataGetter autoTimer
    cinema = this.$route.query
    isAuto = true
    waitSecond = 0
    dateTime = moment(Date.now() - 8.64e7).format('YYYY年MM月DD日')
    param = {
      dateTime: moment(Date.now() - 8.64e7).format('YYYYMMDD'),
      startDate: moment(Date.now() - 8.64e7 * 7).format('YYYYMMDD')
    }
    data5 = null
    data6 = null
    mounted () {
      let self = this
      if (this.provinceTimer !== null) {
        clearInterval(this.provinceTimer)
      }
      if (this.autoTimer !== null) {
        clearInterval(this.autoTimer)
      }
      axios.get('/api/theater/formatlessfilms?date=' + this.param.dateTime + '&code=' + this.cinema.code + '&top=10').then((res) => {
        if (res.data.success) {
          let argsData = []
          let filmNames = []
          let color = [
            '#ff6384',
            '#36a2eb',
            '#cc65fe',
            '#ffce56',
            '#83ffdf',
            '#ecff7f',
            '#2c3eff',
            '#a27fff',
            '#ffc57c',
            '#7bc0ff'
          ]
          res.data.data.forEach(function (obj, index, array) {
            let bar = {
              value: obj.boxoffice,
              itemStyle: {
                normal: {
                  color: color[index]
                }
              }
            }
            argsData.unshift(bar)
            filmNames.push(obj.filmName)
          })
          this.data6 = {
            labels: filmNames,
            series: [
              {
                name: '票房',
                type: 'bar',
                data: argsData
              }
            ]
          }
        }
      })
      axios.get('/api/theater/boxofficehistory?endDate=' + this.param.dateTime + '&startDate=' + this.param.startDate + '&code=' + this.cinema.code).then((res) => {
        if (res.data.success) {
          let datelist = []
          let boxofficeList = []
          let ticketsList = []
          res.data.data.forEach(function (obj, index, array) {
            datelist.push(obj.date)
            boxofficeList.push(obj.boxoffice)
            ticketsList.push(obj.tickets)
          })
          this.data5 = {
            labels: datelist,
            series: [
              {
                name: '票房',
                type: 'line',
                symbol: 'circle',
                symbolSize: 8,
                data: boxofficeList,
                yAxisIndex: 0,
                lineStyle: {
                  normal: {
                    width: 5,
                    color: '#ff6384'
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#ff6384'
                  },
                  emphasis: {
                    color: '#ff6384'
                  }
                }
              },
              {
                name: '人次',
                type: 'line',
                symbol: 'circle',
                symbolSize: 8,
                data: ticketsList,
                yAxisIndex: 1,
                lineStyle: {
                  normal: {
                    width: 5,
                    color: 'rgb(120, 143, 200)'
                  },
                  emphasis: {
                    color: 'rgb(120, 143, 200)'
                  }
                },
                itemStyle: {
                  normal: {
                    color: 'rgb(120, 143, 200)'
                  },
                  emphasis: {
                    color: 'rgb(120, 143, 200)'
                  }
                }
              }
            ]
          }
        }
      })
      let timerId = setInterval(function () {
        if (self.isAuto === false) {
          self.isAuto = true
          self.waitSecond = 0
        } else {
          if (self.waitSecond === 30) {
            // 触发轮转
            self.$router.push({path: '/chart/spreadMap', query: self.cinema})
            clearInterval(timerId)
          } else {
            self.waitSecond++
          }
        }
      }, 1 * 1000)
      self.$store.dispatch('screenMapData/set_AutoTimer', timerId)
    }
    jumpProvince () {
      this.$router.push({path: '/chart/spreadMap', query: this.cinema})
    }
    clickPoint (e) {
      this.isAuto = false
    }
  }
</script>
<style lang="scss" scoped>
  .text {
    font-size: 20px;
  }
  .textNumber {
    font-size:x-large;
    color: rgb(255, 192, 0);
  }
  .textChar {
    margin-right: 10px;
    font-size: large;
    color: rgb(255, 192, 0);
  }
</style>
